<!--
筛选
参数：list筛选条件
时间：select：返回{name：字段名，value：选择结果}

-->
<template>
    <div class="select-list">
        <div class="select-item" v-for="item,index in list">
            <div @click="open(item.value)" :class="{'active':show === item.value}">
                <span>{{item.title}}</span><i class="iconfont icon-jiantou"></i>
            </div>
            <div class="option-list" v-show="show === item.value" style="height:calc(100vh - 1.0667rem)" @click="close">
                <div class="option-item" :class="{'active':value === option.value}" v-for="option in item.options" @click="select(item.value,option.value)">
                    {{option.name}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {homeService} from '../../service/homeService'

    export default {
        data() {
            return{
                show:false,
                value:'',
            }
        },
        props:['list'],
        mounted() {

        },
        updated() {

        },
        methods: {
            open(v){
                if(this.show==v){
                    this.show=''
                }else{
                    this.show=v
                }

            },
            close(){
                this.show=false
            },
            select(i,v){
                let select={
                    name:i,value:v
                }
                this.value = v
                this.$emit('select',select)
                this.show=false
            },
        }

    }
</script>

<style lang="less">

.select-list {
    display: flex;
    justify-content: flex-end;
    height: 1.0667rem;
    align-items: center;
    font-size: .3733rem;
    color: #666;
    box-shadow: inset 0 -1px 0 0 #DDDDDD;
    background: #fff;
    .select-item {
        width: 100px;
        text-align: center;
        .option-list {
            position: absolute;
            width: 100%;
            left: 0;
            top: 1.0667rem;
            background: rgba(0,0,0,.5);
            overflow-y:scroll;
        }
        .option-item {
            line-height: 1.3333rem;
            background: #fff;
            box-shadow: inset 0 -1px 0 0 #EEEEEE;
            padding-left: .4rem;
            text-align: left;
        }
        .icon-jiantou{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            display: inline-block;
            font-size: 12px;
        }
    }
    .active {
        color: #20A0FF;
    }
}


    /*@media only screen and (min-device-width:320px) and (max-device-width:374px) {
        .navbar{font-size: 9px;}
    }
    @media only screen and (min-device-width:375px) and (max-device-width:413px) {
        .navbar{font-size: 10px;}
    }
    @media only screen and (min-device-width:414px) and (max-device-width:474px) {
        .navbar{font-size: 11px;}
    }
    @media only screen and (min-device-width:475px){
        .navbar{font-size: 13px;}
    }*/

</style>